<template>
  <div class="community-container">
    <div style="margin-left:40px;margin-bottom:20px">
      <el-select v-model="queryParams.queryType" placeholder="请选择" @change="changeQueryType">
        <el-option label="全部" value="1"></el-option>
        <el-option label="我的收藏" value="2"></el-option>
        <el-option label="我的图表" value="3"></el-option>
      </el-select>
      <el-button plain @click="resetFilter">清空筛选</el-button>
      <el-button plain @click="newChart">新建图表</el-button>
    </div>
    <div class="toolBar">
      <div class="filter-toolbar">
        <div class="orderBy">
          <el-radio-group v-model="queryParams.orderBy" size="mini" @change="chooseOrderBy">
            <el-radio-button :label="'0'">热门</el-radio-button>
            <el-radio-button :label="'1'">最新</el-radio-button>
          </el-radio-group>
        </div>
        <div class="chartsType-filter">
          <div class="filter-name">图表</div>
          <div :class="activeType==item.dictValue?'componentsTypeItemActive':'componentsTypeItem'" v-for="(item,index) in graphOptions" @click="chooseChartType(item)">
          <!-- <div :class="activeType==item.dictValue?'chartTypeItemActive':'chartTypeItem'" v-for="(item,index) in graphOptions" @click="chooseChartType(item)"> -->
            <!-- <div class="chartTypeIcon"><i :class="item.icon" /></div>
            <div class="chartType">{{item.layerName}}</div> -->
            <div class="chartType">{{item.dictLabel}}</div>
          </div>
        </div>
        <div class="componentsType-filter">
          <div class="filter-name">组件</div>
          <div :class="activeType==item.dictValue?'componentsTypeItemActive':'componentsTypeItem'" v-for="(item,index) in componentOptions" @click="chooseComponentType(item)">
            <div class="componentsType">{{item.dictLabel}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="container" id="container">
      <div class="charts-list-panel" v-infinite-scroll="loadMoreCharts" infinite-scroll-disabled="disabled" id="innerBox" style="height: 700px;overflow-y: auto;">
        <div class="chartCard card-shadow" v-for="item in communityGalleryList" @click="enterEditor(item)">
          <div class="chart-thumbnail">
            <img :src="basePath+item.thumbnail">
            <div class="chart-details">
              <div style="display:flex;flex-wrap:wrap;justify-content: space-between">
                <div class="chart-name"><h4>{{item.name}}</h4></div>
                <div class="bubble" @click.stop="del(item)" title="删除"><i class="el-icon-delete-solid" style="font-size:24px"></i></div>
              </div>
              <div class="chart-description">{{item.description}}</div>
              <div class="chart-createTime">{{item.createTime}}</div>
            </div>
          </div>
          <div class="chart-info">
            <div class="chart-author">{{item.createBy}}</div>
            <div class="chart-statistics">
              <div class="chart-viewCount"><div class="viewCountLogo"><i class="el-icon-view" style="cursor: pointer"></i></div>{{item.viewCount}}</div>
              <div class="chart-starCount"><div class="starCountLogo"><i class="el-icon-star-off" style="cursor: pointer"></i></div>{{item.starCount}}</div>
            </div>
          </div>
        </div>
        <div style="width:100%"><p v-if="noMore && communityGalleryList.length != 0" style="text-align: center;">没有更多了</p></div>
      </div>
    </div>
  </div>
</template>

<script>
import '../../../assets/styles/icon.css'
import { chartsComponents } from '../../tool/datav/ComponentsConfig'
import { listGallery,viewIncrease,delGallery } from "@/api/tool/datav/echartsGallery"
import VueEvent from '@/views/tool/datav/VueEvent'
export default {
  data(){
    return{
      chartsComponents,
      //服务器根路径
      basePath: process.env.VUE_APP_BASE_API,
      //素材列表
      communityGalleryList:[],
      //被选中的图表/组件类型
      activeType:undefined,
      total: -1,
      emptyFlag:false,
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        orderBy:'0',
        graph:"",
        component:"",
        queryType:"1",
        keyword:"",//关键字
      },
      graphOptions:[],
      componentOptions:[],
    }
  },
  created(){
    this.getDicts("datav_graph").then(response => {
      this.graphOptions = response.data;
    });
    this.getDicts("datav_component").then(response => {
      this.componentOptions = response.data;
    });
  },
  mounted(){
    //设置隐藏滚动条
    document.getElementById("container").style.width = (document.body.clientWidth * 0.97) + "px";
    document.getElementById("innerBox").style.width = (document.body.clientWidth * 0.99) + "px"

    this.reloadCharts()
    //监听输入框搜索
    VueEvent.$on('material-search',function(item){
      this.queryParams.keyword = item;
      this.reloadCharts();
    }.bind(this))
  },
  computed:{
    noMore () {
      if(this.total != -1) {
        return this.total == this.communityGalleryList.length
      } else {
        return false;
      }
    },
    disabled () {
      if(this.communityGalleryList.length == 0){
        this.emptyFlag = true;
      }else{
        this.emptyFlag = false;
      }
      return this.loading || this.noMore
    },
  },
  methods:{
    resetFilter(){
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        orderBy:'0',
        graph:"",
        component:"",
        queryType:"1",
        keyword:"",//关键字
      }
      VueEvent.$emit('clear-search')
      this.activeType = undefined
      this.reloadCharts()
    },
    newChart(){
      const newView = this.$router.resolve({path: "/cms/chart", query: {id: undefined}})
      window.open(newView.href,'_blank')
    },
    chooseOrderBy(){
      this.reloadCharts()
    },
    enterEditor(item){
      let viewData = {id: item.id}
      viewIncrease(viewData).then(res =>{
        const viewRuter = this.$router.resolve({path: "/cms/chart", query: {id: item.id}})
        window.open(viewRuter.href,'_blank')
      })

    },
    loadMoreCharts(){
      this.loading = true;
      listGallery(this.queryParams).then(res =>{
        if(res.code == 200){
          this.communityGalleryList =this.communityGalleryList.concat(res.rows);;
          this.total = res.total;
          this.queryParams.pageNum++;
          this.loading = false;
        }
      })
    },
    reloadCharts(){
      this.total = -1;
      this.communityGalleryList = [];
      this.queryParams.pageNum = 1;
      this.loadMoreCharts();
    },
    //选择图表类型
    chooseChartType(item){
      this.activeType = item.dictValue
      this.queryParams.component = ""
      this.queryParams.graph = item.dictValue
      this.reloadCharts()
    },
    //选择组件类型
    chooseComponentType(item){
      this.activeType = item.dictValue
      this.queryParams.graph = ""
      this.queryParams.component = item.dictValue
      this.reloadCharts()
    },
    changeQueryType(){
      this.reloadCharts();
    },
    del(item){
      this.$confirm('是否确认删除该图表?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let delItem = {id : item.id}
        delGallery(delItem).then(response => {
          if (response.code === 200) {
            this.msgSuccess("删除成功");
            this.reloadCharts()
          } else {
            this.msgError(response.msg);
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除操作'
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.community-container {
  padding: 0 15px;
  margin: 30px auto;
  width: 100%;
}
.toolBar{
  padding: 20px 10px;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-bottom: 50px;
}
.orderBy{
  margin-bottom: 30px;
  margin-left: 30px;
}
.chartsType-filter {
  display: flex;
  flex-wrap: wrap;
}
.filter-name {
  width: 100px;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
  line-height: 65px;
  font-size: 14px;
}
.chartTypeItem {
  width: 60px;
  height: 70px;
}
.chartTypeItem:hover {
  background: rgba(122, 153, 255, 0.4);
  cursor: pointer;
}
.chartTypeItemActive {
  width: 60px;
  height: 70px;
  color:rgb(27, 77, 240); ;
  background: rgba(122, 153, 255, 0.4);
  cursor: pointer;
}
.chartTypeIcon {
  width: 40px;
  height: 40px;
  margin: 0px auto;
  text-align: center;
}
.chartTypeIcon i {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.chartType {
  font-size: 12px;
  text-align: center;
  line-height: 2.4em;
}
.componentsType-filter {
  display: flex;
  flex-wrap: wrap;
}
.componentsTypeItem {
  width: 80px;
  height: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #0d2cb2;
  border: 1px solid #0d2cb2;
  border-radius: 1.5rem;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 5px;
}
.componentsTypeItem:hover{
  color: #fff;
  font-size: 16px;
  background: #0d2cb2;
  cursor: pointer;
}
.componentsTypeItemActive{
  width: 80px;
  height: 30px;
  font-weight: 600;
  border: 1px solid #0d2cb2;
  border-radius: 1.5rem;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 5px;
  color: #fff;
  font-size: 16px;
  background: #0d2cb2;
  cursor: pointer;
}
.componentsType {
  font-size: 12px;
  text-align: center;
  line-height: 2.4em;
}
.charts-list-panel {
  height: 700px;
  margin: 15px auto;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  overflow: auto;
}
.chartCard {
  position:relative;
  width: 15%;
  height: 250px;
  border-radius: 3%;
  background: rgb(255, 255, 255);
  margin:0px 0.7% 30px 0.8%;
  cursor:pointer
}
.card-shadow {
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, .4);
}
.chart-thumbnail {
  position:relative
}
.chart-thumbnail img{
  width: 100%;
  height: 210px;
  border-radius: 3%;
}
.chart-info {
  width: 100%;
  padding-left: 30px;
  padding-right: 20px;
  position:absolute;
  bottom: 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.chart-author {
  font-size: 14px;
  text-align: left;
  margin-right: 40px;
}
.chart-statistics{
  display: flex;
  flex-wrap: wrap;
}
.chart-viewCount {
  display: flex;
  flex-wrap: wrap;
  margin-right: 10px;
  font-size: 14px;
}
.viewCountLogo {
  margin-right: 3px;
}
.chart-starCount {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
}
.starCountLogo {
  margin-right: 3px;
}
.chart-details {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    z-index: 10;
    display: inline-block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px;
    background: linear-gradient(180deg, rgba(240, 240, 240, 0.95) 0%, rgba(228, 228, 228, 0.88) 33%, rgba(255, 255, 255, 0.65) 100%);
    transition: 0.1s all ease-in-out;
    border-radius: 3%;
    text-align: left;
}
.chart-details:hover {
  opacity: 1;
}
.chart-createTime {
  position: absolute;
  bottom: 10%;
}
.bubble{
  width: 32px;
  height: 32px;
  background-color: rgba(240, 240, 240, 0.623);
  padding: 4px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  color: rgb(0,0,0);
}
.bubble:hover{
  background-color: rgba(255, 255, 255, 1);
}
.community-container .container{
    position: relative;
    margin: auto;
    overflow: hidden;
    /* margin-right: 0%; */
}
</style>
